* {
    margin: 0px;
    padding: 0px;
}

ul li {
    list-style: none;
}

h2 {
    margin-bottom: 20px;
}

h3 {
    margin-top: 20px;
    margin-bottom: 20px;
}

.red {
    color: red;
}

.margin-bottom-10 {
    margin-bottom: 10px;
}

.margin-bottom-20 {
    margin-bottom: 20px;
}

.margin-bottom-30 {
    margin-bottom: 30px;
}

.none {
    display: none !important;
}

.relative {
    position: relative;
}

.wrap {
    background-color: #dddddd;
    width: 800px;
    padding: 20px;
    margin: 20px auto;
}

.wrap img {
    width: 100%;
    height: auto;
}

.demo1 {
    height: 300px;
    width: 800px;
    display: flex;
    /* flex-direction: column; */
    /* flex-wrap: wrap; */
    flex-wrap: wrap-reverse;
    /* flex-flow: row wrap-reverse; */
    justify-content: flex-start;
    align-items: flex-start;


    /* align-content:flex-end; */
}

.demo1 li {
    width: 200px;
    height: 50px;
    box-sizing: border-box;
    border: 1px dashed rgb(252, 102, 127);
    display: flex;
    justify-content: center;
    align-items: center;
}

.demo2 {
    height: 300px;
    width: 800px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
}

.demo2 li {
    width: 200px;
    height: 50px;
    box-sizing: border-box;
    border: 1px dashed rgb(255, 118, 141);
    display: flex;
    justify-content: center;
    align-items: center;
}

.demo2 li:nth-child(7) {
    order: -1
}

.demo3 {
    height: 300px;
    width: 800px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
}

.demo3 li {
    width: 250px;
    height: 50px;
    box-sizing: border-box;
    border: 1px dashed rgb(254, 104, 129);
    display: flex;
    justify-content: center;
    align-items: center;
}

.demo3 li:nth-child(7) {
    flex-grow: 2
}

.demo4 {
    height: 300px;
    width: 800px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
}

.demo4 li {
    flex-grow: 1;
    width: 150px;
    height: 50px;
    box-sizing: border-box;
    border: 1px dashed rgb(255, 113, 136);
    display: flex;
    justify-content: center;
    align-items: center;
}

.demo4 li:nth-child(7) {
    flex-grow: 2
}

.demo5 {
    height: 200px;
    width: 800px;
    display: flex;
    /* flex-wrap: wrap; */
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
}

.demo5 li {
    flex-grow: 1;
    /* width: 150px; */
    height: 50px;
    box-sizing: border-box;
    border: 1px dashed rgb(255, 111, 135);
    display: flex;
    justify-content: center;
    align-items: center;
}

.demo5 li:nth-child(7) {
    flex-grow: 2
}

.demo6 {
    height: 200px;
    width: 800px;
    display: flex;
    /* flex-wrap: wrap; */
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
}

.demo6 li {
    /* flex-grow: 1; */
    width: 150px;
    height: 50px;
    box-sizing: border-box;
    border: 1px dashed rgb(248, 106, 129);
    display: flex;
    justify-content: center;
    align-items: center;
}

.demo6 li:nth-child(7) {
    flex-shrink: 0
}

.demo7 {
    height: 200px;
    width: 800px;
    display: flex;
    /* flex-wrap: wrap; */
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
}

.demo7 li {
    /* flex-grow: 1; */
    width: 50px;
    height: 50px;
    box-sizing: border-box;
    border: 1px dashed rgb(255, 94, 120);
    display: flex;
    justify-content: center;
    align-items: center;
}

.demo7 li:nth-child(7) {
    flex-shrink: 0
}

.demo8 {
    height: 200px;
    width: 800px;
    display: flex;
    /* flex-wrap: wrap; */
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
}

.demo8 li {
    /* flex-grow: 0; */
    width: 50px;


    height: 50px;
    box-sizing: border-box;
    border: 1px dashed rgb(255, 96, 123);
    display: flex;
    justify-content: center;
    align-items: center;
}

.demo8 li:nth-child(7) {
    flex-basis: 200px;
    /* flex-shrink: 0; */
    /* flex-grow: 1; */
}

.demo9 {
    height: 200px;
    width: 800px;
    display: flex;
    /* flex-wrap: wrap; */
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
}

.demo9 li {
    /* flex-grow: 0; */
    width: 200px;


    height: 50px;
    box-sizing: border-box;
    border: 1px dashed rgb(251, 94, 120);
    display: flex;
    justify-content: center;
    align-items: center;
}

.demo9 li:nth-child(7) {
    flex-basis: 400px;
    flex-shrink: 0;
    /* flex-grow: 1; */
}

.demo10 {
    height: 200px;
    width: 800px;
    display: flex;
    /* flex-wrap: wrap; */
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
}

.demo10 li {
    /* flex-grow: 0; */
    width: 200px;


    height: 50px;
    box-sizing: border-box;
    border: 1px dashed rgb(255, 41, 76);
    display: flex;
    justify-content: center;
    align-items: center;
}

.demo10 li:nth-child(3) {
    align-self: flex-end;
}